DOC: WIP: Convert markdown to rehype's hast at build time. #1495
Conversation
tomprince
force-pushed
the
hast-at-webpack-time
branch
2 times, most recently
from
577edcf
to
ef9471d
Compare
This is a demo of parsing markdown all the way to hast JSON, and then tricking react-markdown into using that pre-parsed hast directt, rather than parsing markdown at runtime.
tomprince
force-pushed
the
hast-at-webpack-time
branch
from
ef9471d
to
877c577
Compare
|
One thing I'll note is that the speed issue largely depends on full preprocessing, since looking at the profiles showed that at least half the time was spent dealing with MathJax. (The slow pages are the ones with lots of formulas.) |
|
I added a second commit which uses Note that the prop changes are also in |
I've not done any profiling or benchmarking, but the mathjax processing is happening at webpack-time. The result hast-json of the SVG elements generated by mathjax. |
Oh, nice! I'm still a bit confused about the fundamental issue, though: Why can't you go all the way down to HTML? I was envisioning we just embed them in an iframe or something. |
There is nothing fundamental preventing us from compiling down to html. As I mentioned, I had a version that did that (and then displayed it inline using If somebody is looking to do that, you can add Mostly I went with the approach I did to get something working with the correct styling with minimal effort. |
Originally posted by @d0sboots in #1489 (comment)
I was curious to see how hard it would be to do this. At first I attempted to convert directly to html at webpack time. However, that ended up with essentially unstyled output.
This is my second attempt, which converts markdown to hast (which is the HTML ast used by
react-markdown) at webpack-time. Then, at runtime, it loads the JSON hast, and tricks react-markdown into using that directly, rather than parsing the markdown at runtime.I'll likely leave this to somebody else to turn into something that can be merged.